<template>
  <view class="card-wrapper">
    <!-- 时间标签
    <view class="time-label">
      <text>{{ propData.add_time }} 来自 {{ propData.source || '张鼎推荐' }}</text>
    </view> -->
    
    <!-- 卡片内容 -->
    <view class="card-item">
      <!-- 添加置顶标识 -->
      <view v-if="propSpec == 1" class="top-badge">
        <text class="top-text">{{$t('fengcheche.classinfo.zhiding')}}</text>
      </view>
      
      <!-- 第一行：头像、名字、职位、收藏按钮 -->
      <view class="card-row-1">
        <view class="avatar-wrapper" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+propData.id" @tap="url_event">
          <image v-if="propData.logo" :src="propData.logo" class="avatar" mode="aspectFill"></image>
          <view v-else class="avatar-placeholder">
             <text v-if="propData.name !=''">{{ getFirstChar(propData.name) }}</text>
			 <text v-else>{{ getFirstChar(propData.user.nickname) }}</text>
          </view>
        </view>
        <view class="name-position" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+propData.id" @tap="url_event">
          <text v-if="propData.name !=''" class="name">{{ propData.name }}</text>
		  <text v-else class="name">{{ propData.user.nickname }}</text>
          <text class="position">[{{ propData.position_type_name || '经理' }}] {{ propData.company.name }}</text>
        </view>
        <!-- 更新收藏按钮颜色为更明显的金黄色 -->
        <view class="favorite-btn" @tap="toggleFavorite" :data-value="propData.id">
          <uni-icons 
            :type="propData.is_soucang == 1 ? 'star-filled' : 'star'" 
            :color="propData.is_soucang == 1 ? '#f59e0b' : '#d1d5db'" 
            size="24"
          ></uni-icons>
        </view>
      </view>
	  
		<!-- 添加公司简介描述 -->
		<view v-if="propData.com_describe" class="description-row" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+propData.id" @tap="url_event">
		  <text class="description-text">{{ propData.com_describe }}</text>
		</view>
      
      <!-- 添加标签展示 -->
      <view v-if="site_for_led == 0 && propData.com_label_arr && propData.com_label_arr.length > 0" class="tags-row" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+propData.id" @tap="url_event">
        <view v-for="(tag, index) in propData.com_label_arr" :key="index" class="tag-item">
          <text>{{ tag }}</text>
        </view>
      </view>
      
      <!-- 添加证书展示 -->
      <view v-if="site_for_led == 0 && propData.com_zhengshu_arr && propData.com_zhengshu_arr.length > 0" class="certificates-row" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id='+propData.id" @tap="url_event">
        <uni-icons type="medal" color="#f59e0b" size="16"></uni-icons>
        <view class="certificates-list">
          <text v-for="(cert, index) in propData.com_zhengshu_arr" :key="index" class="cert-text">
            {{ cert.name }}{{ index < propData.com_zhengshu_arr.length - 1 ? ' | ' : '' }}
          </text>
        </view>
      </view>

      <!-- 第三行：公司信息 -->
      <view class="card-row-3">
        <view class="info-item">
          <uni-icons type="location" color="#6b7280" size="16"></uni-icons>
          <text class="info-text ellipsis">{{ propData.province_name }}{{ propData.city_name }}</text>
          <text v-if="propData.distance" class="distance-text">{{ propData.distance }}</text>
        </view>
        <view v-if="propData.contact_tel && (propData.company.the_level_content || null) != null && (propData.company.the_level_content.is_company_list_tel || null) != null && parseInt(propData.company.the_level_content.is_company_list_tel.value) == 1" class="action-btn phone-btn" @tap="call_event" :data-value="propData.contact_tel">
          <uni-icons type="phone-filled" color="#3b82f6" size="18"></uni-icons>
        </view>
      </view>
    </view>
	
	<!-- 分享弹窗 -->
	<component-share-popup ref="share"></component-share-popup>
	
	<!-- #ifdef APP-PLUS -->
	<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	<!-- #endif -->
  </view>
</template>

<script>
const app = getApp();
// #ifdef APP-PLUS
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
// #endif
import componentSharePopup from "@/components/share-popup/share-popup";
export default {
	name: 'CardItem',
	props: {
		propData: {
		  type: Object,
		  default: () => ({})
		},
		propConfig: {
		  type: Object,
		  default: () => ({})
		},
		propSpec: {
		  type: String,
		  default: ''
		}
	},
	data() {
		return {
			site_for_led: app.globalData.data.site_for_led,
		}
	},
	components: {
		// #ifdef APP-PLUS
		ykAuthpup,
		// #endif
		componentSharePopup
	},
	methods: {
		// 获取名字首字
		getFirstChar(name) {
			return name ? name.charAt(0) : '?';
		},
		
		// url事件
		url_event(e) {
			app.globalData.url_event(e);
		},
    
    // 切换收藏 
    toggleFavorite(e) {
		//this.propData.is_soucang = !this.propData.is_soucang;
		var user = app.globalData.get_user_info(this, 'toggleFavorite');
		if (user != false) {
			uni.showLoading({
				title: this.$t('common.processing_in_text'),
			});
			var val = e.currentTarget.dataset.value;
			uni.request({
				url: app.globalData.get_request_url('favor', 'usercard', 'classinfo'),
				method: 'POST',
				data: {
					id: val,
				},
				dataType: 'json',
				success: res => {
					uni.hideLoading();
					if (res.data.code == 0) {
						let temp_item = this.propData;
						temp_item['is_soucang'] = res.data.data;
						this.setData({
							propData: temp_item
						});
						app.globalData.showToast(res.data.msg, 'success');
						
						// 向父组件发送事件，让父组件更新数据
						this.$emit('toggle-favorite', {
							id: this.propData.id,
							is_soucang: res.data.data
						});
					} else {
						if (app.globalData.is_login_check(res.data, this, 'soucang')) {
							app.globalData.showToast(res.data.msg);
						}
					}
				},
				fail: () => {
					uni.hideLoading();
					app.globalData.showToast(this.$t('common.internet_error_tips'));
				}
			});
		}
    },
    
    // #ifdef APP-PLUS
    //用户授权权限后的回调
    changeAuth(e){
    	// 如果是头像查看的权限返回
    	if(this.permissionID == 'WRITE_EXTERNAL_STORAGE')
    	{
    		// 直接下载
    		app.globalData.save_image_by_url(this.avatar);
    	}else{
    		app.globalData.call_tel(e);
    	}
    },
    // #endif
    
    // 打电话
    call_event(e){
    	var tel = e.currentTarget.dataset.value;
    	if(app.globalData.is_android())
    	{
    		this.permissionID = 'CALL_PHONE';
    		setTimeout(()=>{
    			this.$refs['authpup'].open(tel);
    		},500);
    	}else{
    		app.globalData.call_tel(tel);
    	}
    },
    
    // 分享联系人
    shareContact(e) {
		//app.globalData.showToast('分享 ' + this.propData.name + ' 的名片');
		// TODO: 实现分享功能
		var share_info = {
		    title: this.propData.name || this.propData.user.nickname,
		    kds: this.propData.seo_keywords,
		    desc: this.propData.com_describe,
		    path: '/pages/fcc/classinfo/companycard-detail/companycard-detail',
		    query: 'id='+this.propData.id,
		};
		if(this.propData.logo != '')
		{
			share_info['img'] = this.propData.logo;
		}
console.log(share_info);
		if ((this.$refs.share || null) != null) {
			this.$refs.share.init({
				status: true,
				share_info: share_info
			});
		}
    }
  }
}
</script>

<style scoped>
/* 卡片样式 */
.card-wrapper {
  margin-bottom: 30rpx;
}

.time-label {
  padding: 15rpx 30rpx;
  font-size: 24rpx;
  color: #999;
}

.card-item {
  background-color: white;
  margin: 0 30rpx;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative; /* 为置顶标识定位 */
}

/* 第一行：头像、名字、职位、收藏 */
.card-row-1 {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.avatar-wrapper {
  flex-shrink: 0;
  margin-right: 20rpx;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
}

.avatar-placeholder {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7 0%, #4f46e5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 36rpx;
  font-weight: 600;
}

.name-position {
  flex: 1;
  min-width: 0;
}

.name {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #111827;
  margin-bottom: 8rpx;
}

.position {
  display: block;
  font-size: 28rpx;
  color: #6b7280;
}

.favorite-btn {
  flex-shrink: 0;
  padding: 10rpx;
}

/* 标签行样式 */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
  gap: 12rpx;
}

.tag-item {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  padding: 8rpx 20rpx;
  border-radius: 24rpx;
  font-size: 22rpx;
  color: white;
}

/* 证书行样式 */
.certificates-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 16rpx 20rpx;
  background-color: #fffbeb;
  border-radius: 12rpx;
  border: 1rpx solid #fde68a;
}

.certificates-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-left: 12rpx;
}

.cert-text {
  font-size: 24rpx;
  color: #92400e;
  line-height: 1.5;
}

/* 第二行：电话信息 */
.card-row-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

/* 第三行：公司信息 */
.card-row-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 20rpx;
}

.info-text {
  font-size: 28rpx;
  color: #6b7280;
  margin-left: 10rpx;
}

/* 距离显示样式 */
.distance-text {
  font-size: 24rpx;
  color: #3b82f6;
  margin-left: 16rpx;
  font-weight: 500;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 置顶标识样式 */
.top-badge {
  position: absolute;
  /* 调整置顶标识位置，避免与收藏按钮过近 */
  top: -10rpx;
  right: -10rpx;
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  padding: 10rpx 24rpx;
  border-radius: 0 16rpx 0 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
  z-index: 10;
}

.top-text {
  font-size: 22rpx;
  color: white;
  font-weight: 600;
  letter-spacing: 1rpx;
}

.action-btn {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phone-btn {
  background-color: #eff6ff;
}

.share-btn {
  background-color: #ecfdf5;
}

/* 添加简介描述样式 */
.description-row {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #f9fafb;
  border-radius: 12rpx;
  border-left: 4rpx solid #10b981;
}

.description-text {
  font-size: 26rpx;
  color: #4b5563;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 改为最多显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
